<template>
  <!-- 五险一金设置 -->
  <div>
    <Row class="search-info-style">
      <Col style="float:right" pull="1">
        <!--        <Button class="new-btn-sty" @click="findtime()"><Icon type="ios-search" />搜索</Button>-->
        <Button class="new-btn-sty" @click="add()"><Icon type="md-add" />添加</Button>
      </Col>
    </Row>
    <Table border :columns="columns" :data="data">
      <template slot-scope="{ row }" slot="mode">
        <span v-if="row.mode == '1'">根据工资扣缴</span>
        <span v-if="row.mode == '2'">固定基数扣缴</span>
      </template>
      <template slot-scope="{ row }" slot="name">
        <span  :value="item.TYPECODE" v-for="item in insuranceList" v-bind:key="item.TYPECODE"  v-if="row.name == item.TYPECODE">{{ item.TYPENAME }}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="show(row)">编辑</Button>
        <!--        <Button type="error" size="small" @click="remove(index)">Delete</Button>-->
      </template>
    </Table>
    <Row v-if="loadData == true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Page class="page_style" :total="totalnum" :current="currentPageNo"
          :page-size="currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
    <Modal v-model="modalEdit" title="五险一金" @on-ok="OK111">
      <Form :model="paramData" >
        <Row class="item1">
          <Col span="7" style="text-align: right" class="">保险类型:<span style="color: red">(必填)</span></Col>
          <Col span="12" offset="1">
            <Select v-model="paramData.name" filterable transfer="">
              <Option :value="item.TYPECODE" v-for="item in insuranceList" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
            </Select>
          </Col>
        </Row>



        <Row class="item1">
          <Col span="7" style="text-align: right" class="">个人扣缴比例(%):<span style="color: red">(必填)</span></Col>
          <Col span="12" offset="1">
<!--            <InputNumber  :formatter="value => `${value}%`" :parser="value => value.replace('%', '')" style="width: 245px" :min="0" :max="100" v-model="paramData.proportion" placeholder="请输入该保险个人扣缴比例"/>-->
            <Input type="number" :formatter="value => `${value}%`" :parser="value => value.replace('%', '')" style="width: 245px" :min="0" :max="100" v-model="paramData.proportion" placeholder="请输入该保险个人扣缴比例"/>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="7" style="text-align: right" class="">单位扣缴比例(%):<span style="color: red">(必填)</span></Col>
          <Col span="12" offset="1">
            <Input type="number" :formatter="value => `${value}%`" :parser="value => value.replace('%', '')" style="width: 245px" :min="0" :max="100" v-model="paramData.unit_withholding" placeholder="请输入该保险个人扣缴比例"/>
<!--            <InputNumber :formatter="value => `${value}%`" :parser="value => value.replace('%', '')" style="width: 245px" :min='0' :max="100" v-model="paramData.unit_withholding" />-->
          </Col>
        </Row>
        <Row class="item1">
          <Col span="7" style="text-align: right" class="">扣缴方式:<span style="color: red">(必填)</span></Col>
          <Col span="12" offset="1">
            <RadioGroup @on-change="changMode(paramData.mode)" v-model="paramData.mode" type="button">
              <Radio label="1">根据工资扣缴</Radio>
              <Radio label="2">固定基数扣缴</Radio>
            </RadioGroup>
          </Col>
        </Row>
        <Row v-if="state" class="item1">
          <Col span="7" style="text-align: right" class="">扣缴基数:<span style="color: red">(必填)</span></Col>
          <Col span="12" offset="1">
            <InputNumber style="width: 245px" :min='0' v-model="paramData.money_num" />
          </Col>
        </Row>
        <Row v-if="!state" class="item1">
          <Col span="7" style="text-align: right" class="">扣缴项:<span style="color: red">(必填)</span></Col>
          <Col span="12" offset="1">
            <Select multiple @on-change="changeTerm(paramData.terms)" v-model="paramData.terms" placeholder="请选择扣缴项">
              <Option :value="item.TYPECODE" v-for="item in surfaceList" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
<!--              <Option value="wage_basics">岗位基本工资</Option>-->
<!--              <Option value="wage_subsidy">补贴工资</Option>-->
<!--              <Option value="wage_scale">等级工资</Option>-->
<!--              <Option value="wage_achievements">绩效工资</Option>-->
            </Select>
          </Col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>
<script>
import { saveFiveRisks, findFiveRisksList, getTypeNameList } from '@/api/eventlist'
export default {
  data () {
    return {
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      loadData: true,
      paramData: {
        proportion: 0,
        unit_withholding: 0
      },
      insuranceList: [],
      surfaceList: [],
      data: [],
      state: false,
      modalEdit:false,
      modalShow:false,
      columns: [
        { title: '序号', type: 'index', width: 100, align: 'center' },
        { title: '区县', key: 'company_name', minWidth: 100, align: 'center' },
        { title: '保险类型', slot: 'name', minWidth: 100, align: 'center' },
        { title: '个人扣缴比例(百分比)', key: 'proportion_num', minWidth: 100, align: 'center' },
        { title: '单位扣缴比例(百分比)', key: 'unit_withholding_num', minWidth: 100, align: 'center' },
        { title: '扣缴方式', slot: 'mode', minWidth: 100, align: 'center' },
        { title: '扣缴基数', key: 'money_num', minWidth: 100, align: 'center' },
        { title: '扣缴项', key: 'term_name', minWidth: 100, align: 'center' },
        { title: '操作', slot: 'action', minWidth: 100, align: 'center' }
      ]
    }},
  methods: {
    init() {
      let param = {
        pageSize: this.currentPageSize,
        pageNo: this.currentPageNo
      }
      findFiveRisksList (param).then(res => {
        if (res.data.errcode === 0) {
          this.data = res.data.data.results
          this.totalnum = res.data.data.totalRecord
          this.loadData = false
        } else {
          this.$Notice.error({
            title: '获取列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    show (item) {
      this.paramData = this.$common.xeUtils.clone(item,true)
      console.log(this.paramData.term)
      if (this.paramData.term) {
        console.log(this.paramData.term, '[[[[[')
        this.paramData.terms = this.paramData.term.split(",")
        console.log(this.paramData.terms, '[[[[[')
      }
      this.changMode(this.paramData.mode)
      this.modalEdit = true
    },
    add () {
      console.log('添加的方法')
      this.paramData = {
        proportion: 0,
        unit_withholding: 0,
        mode: '1'
      }
      this.state = false
      this.modalEdit = true
    },
    changMode(mode) {
      console.log(mode)
      if (mode === '1') {
        this.state = false
      } else if (mode === '2') {
        this.state = true
      }
    },
    changeTerm(item) {
      let term = ''
      item.forEach(function (temp, index) {
        if (term) {
          term = term + ',' + temp
        } else {
          term = temp
        }
      })
      this.paramData.term = term
      console.log(term)
    },
    getTypeName (id) {
      getTypeNameList({ typegroupcode: id }).then(res => {
        if (res.data.errcode === 0) {
          this.insuranceList = res.data.data
        } else {
          this.$Notice.error({
            title: '获取字典列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getTypeName2 (id) {
      getTypeNameList({ typegroupcode: id }).then(res => {
        if (res.data.errcode === 0) {
          this.surfaceList = res.data.data
        } else {
          this.$Notice.error({
            title: '获取字典列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    OK111() {
      saveFiveRisks(this.paramData).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功', desc: '' })
          this.init()
        } else {
          this.$Notice.error({ title: '保存失败!', desc: res.data.errmsg })
          this.init()
        }
      })
    },
    size (pageSize) {
      this.currentPageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.currentPageNo = pageNo
      this.init()
    }
  },

  mounted() {
    this.init()
    this.getTypeName('insurance')
    this.getTypeName2('surface')
  }
}
</script>
<style scoped>
.search-info-style {
  margin: 10px;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
}
.item1{
  height: 42px;
  line-height: 40px;
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
</style>
